<template>
   <div class="layout">
    <Layout>

      <!-- 导航栏 -->
      <Header :style="{width: '100%'}">
        <Menu mode="horizontal" theme="dark" active-name="TaoProject">

    
          <div >
            <MenuItem name="TaoProject">
            <div @click="routerHome">
            <span >淘方案</span>
            </div>
            </MenuItem>
          </div>
            
          <div class="layout-navleft">

            <!-- 显示大类的名字 -->
            <template v-for="i in this.categoriesData.length-1" >
            <MenuItem name="Automotive">
          
              
        <Dropdown >
          <a href="javascript:void(0)" style="color:white"><span>{{categoriesData[i].name}}</span><Icon type="ios-arrow-down"></Icon></a>
              <DropdownMenu slot="list">
               
               <!-- 显示小类的名字 -->
              <template v-for="smallProjectClass in categoriesData[i].children" >

                <!-- 点击后路由进行跳转 -->
                <div @click="routerProject(smallProjectClass._id)">
              <DropdownItem >{{smallProjectClass.name}}</DropdownItem>
                </div>
              </template>
              </DropdownMenu>
            </Dropdown>
            
            </MenuItem>
            </template>
          </div>

          <div class="layout-nav">

           

            <MenuItem name="Search">
            <div >
             search
            </div>
            </MenuItem> 

            
            <!-- 用来判断登录了没有 -->
          <template v-if="true">
            <MenuItem name="Login">
            <div v-on:click="routerLogin">
            <span >登录</span>
            </div>
            </MenuItem>

            <MenuItem name="Register">
            <div v-on:click="routerRegister">
            <span >注册</span>
            </div>
            </MenuItem>
          </template>

          <template v-else>
              <MenuItem name="User">
            <div >
               <Dropdown>
                  <a href="javascript:void(0)" style="color:white">
                    <span>用户名</span>
                  <Icon type="ios-arrow-down"></Icon>
                  </a>
                  <DropdownMenu slot="list">
                  <DropdownItem>
                    <div v-on:click="routerAccountSetting">
                      <span >账户设置</span>
                    </div>
                  </DropdownItem>
                  <DropdownItem>
                     <div v-on:click="routerMyCollect">
                      <span >我的收藏</span>
                    </div>
                  </DropdownItem>
                  <DropdownItem>
                     <div v-on:click="routerLogOut">
                      <span >注销</span>
                      </div>
                  </DropdownItem>
                  </DropdownMenu>
              </Dropdown>
            </div>
            </MenuItem>
          </template>
            

          </div>
        </Menu>
      </Header>

    <!-- 内容 -->
      <Content :style="{margin: '50px 100px 0', background: '#fff', minHeight: '500px'}">
        <router-view></router-view>
      </Content>

    <!-- 底部 -->
      <Footer class="layout-footer-center">2018-2035 &copy; TaoProject</Footer>

    </Layout>
<GoBackToTop></GoBackToTop>
    
  </div>
</template>

<script>
//引入组件（返回顶部）
import GoBackToTop from "./GoBackToTop";
export default {
  components: {
    GoBackToTop
  },
  data() {
    return {
      //API 接口
      url: {
        categories: this.$Global.url.categories
      },

      //数据库获取的数据
      categoriesData: {
        name: ""
      }
    };
  },
  methods: {
    //设置路由跳转

    /**
     * 判断登录状态，然后进行跳转，参数带上分类的id
     */
    routerProject: function(id) {
      if (true) {
        this.$router.push({ name: "Project", params: { id } });
      } else {
        this.$Message.warning("用户尚未登录");
      }
    },
    /**
     * 跳转至主页
     */
    routerHome: function() {
      this.$router.push("/");
    },

    /**
     * 跳转至登录页面
     */
    routerLogin: function() {
      this.$router.push("/AccountLogin");
    },

    /**
     * 跳转至注册页面
     */
    routerRegister: function() {
      this.$router.push("/AccountRegister");
    },

    /**
     * 跳转至用户设置页面
     */
    routerAccountSetting: function() {
      this.$router.push("/AccountSetting");
    },

    /**
     * 跳转至收藏页面
     */
    routerMyCollect: function() {
      this.$router.push("/Collect");
    },

    /**
     * 注销后返回未登录的主页
     */
    routerLogOut: function() {
      //要先消除登录状态，再返回主页
      this.$router.push("/");
    },

    /**
     * 获取数据库里的分类信息
     */
    getCategories() {
      this.$http
        .get(this.url.categories)
        .then(res => {
          if (res.status == 200) {
            this.categoriesData = res.data.categories;
            this.projectList = this.categoriesData.length;

            // console.log(this.projectList);

            console.log(this.categoriesData);
          }
        })
        .catch(error => console.log(error));
    }
  },

  created() {
    /**
     * 开发模式下，拼接地址，形成完整的API接口
     */
    if (process.env.NODE_ENV === "development") {
      this.url.categories =
        this.$Global.url.baseUrl + this.$Global.url.categories;
    }
    this.getCategories();
  }
};
</script>

<style scoped>
.layout {
  border: 1px solid #d7dde4;
  background: #f5f7f9;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}
.layout-navleft {
  float: left;
  width: 500px;
  margin: 0 auto;
  margin-left: 200px;
}

.layout-nav {
  float: right;
  /* width: 420px; */
  margin: 0 auto;
  margin-left: 200px;
}

.layout-footer-center {
  text-align: center;
}
</style>
